<template>
  <Header @get-instance="getInstanceFromTopBar"/>
  <div class="main-box">
    <a-skeleton style="padding: 100px" :loading="loading" active avatar/>
    <div v-if="userInfo === null && !loading">
      <a-result status="404" title="查无此人" sub-title="这个人不存在哦！">
        <template #extra>
          <router-link to="/">
            <a-button type="primary">返回主页</a-button>
          </router-link>
        </template>
      </a-result>
    </div>
    <a-flex v-if="!loading && userInfo !== null" horizontal gap="small"  justify="center" align="center">
      <div class="user-info-box-left">
        <a-card style="width: 380px; text-align: left">
          <template #cover>
            <img alt="example" :src="userInfo.header" />
          </template>
          <a-card-meta :title="userInfo.nickname">
            <template #avatar>
              <ManOutlined v-if="userInfo.gender === 1" />
              <WomanOutlined v-if="userInfo.gender === 0" />
            </template>
            <template #description>{{userInfo.introduce}}</template>
          </a-card-meta>
          <template v-if="session !== null && userInfo.userId === session.userId" #actions>
            <edit-outlined key="edit" @click="editUserInfo"/>
          </template>
        </a-card>
        <a-modal v-model:open="editWindowOpen" title="修改个人信息"
                 okText="确定" cancelText="取消" :maskClosable="false"
                 :confirm-loading="confirmLoading" @ok="submitEdit" @cancel="cancelSubmitEdit">
          <a-form
              :model="userInfoCache"
              name="basic"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 12 }"
              autocomplete="off">
            <a-form-item label="头像" name="header">
              <UploadSingleImg :imgUrl="userInfoCache.header" @get-instance="getInstanceFromUploadImg"/>
            </a-form-item>
            <a-form-item label="昵称" name="nickname"
                :rules="[{ required: true, message: '昵称不能为空' }]">
              <a-input v-model:value="userInfoCache.nickname" />
            </a-form-item>
            <a-form-item label="邮箱" name="email"
                :rules="[{ required: true, message: '邮箱不能为空' }]">
              <a-input v-model:value="userInfoCache.email" />
            </a-form-item>
            <a-form-item label="性别" name="gender">
              <a-radio-group v-model:value="userInfoCache.gender">
                <a-radio-button :value="0"><WomanOutlined/></a-radio-button>
                <a-radio-button :value="1"><ManOutlined/></a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="个性签名" name="introduce">
              <a-textarea v-model:value="userInfoCache.introduce" show-count :maxlength="50" />
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
      <div class="user-info-box-right">
        <h2>R</h2>
      </div>
    </a-flex>
  </div>
</template>

<script setup>
import UploadSingleImg from "@/components/common/UploadSingleImg.vue";
import {onBeforeMount, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import router from "@/router/index.js";
import { EditOutlined, WomanOutlined, ManOutlined } from '@ant-design/icons-vue';
import Header from "@/components/common/TopBar.vue";
import {getUserInfo} from "@/api/UserRequest.js";

const userId = router.currentRoute.value.params.userId;
const userInfo = ref(null);
let userInfoCache = ref({});
const loading = ref(true);
const session = ref(null);
const editWindowOpen = ref(false);
const confirmLoading = ref(false);

function getInstanceFromTopBar(instance) {
  session.value = instance.session;
}

function editUserInfo() {
  editWindowOpen.value = true;
}

function submitEdit() {
  confirmLoading.value = true;
  setTimeout(() => {
    editWindowOpen.value = false;
    confirmLoading.value = false;
  }, 2000);
}

function cancelSubmitEdit() {
  userInfoCache.value = {...userInfo.value}
}

function loadUserInfo(id) {
  getUserInfo(id).then(res => {
    loading.value = false;
    if(res.code === 0) {
      userInfo.value = res.data;
      userInfoCache.value = {...res.data}
    } else {
      message.warn(res.msg);
    }
  })
}

function getInstanceFromUploadImg(instance) {
  if(typeof instance.remove !== 'undefined' && instance.remove){
    userInfoCache.value.header = '';
  } else {
    userInfoCache.value.header = instance.bucketName + ':' + instance.objectName;
  }
}

onBeforeMount(_ => {
  loadUserInfo(userId);
})

</script>

<style scoped>
.main-box{
  margin-top: 110px;
  margin-left: 25px;
  margin-right: 25px;
}

.user-info-box-left{
  width: 36%;
  padding: 1rem;
  display: contents;
}

.user-info-box-right{
  width: 64%;
  padding: 1rem;
}
</style>